<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../css/aui.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <script type="text/javascript" src="../script/api.js"></script>
    <script language="JavaScript" src="../script/vue.js"></script>
    <script language="JavaScript" src="../script/common.js"></script>
    <style>
        .bg-white {
            background-color: #fff;
        }

        .home-topbar {
            padding-top: 2rem;
            padding-bottom: 1rem;
            background-color: #e02e24;
        }

        .home-topbar .logopic {
            border-radius: 50%;
            width: 2rem;
            height: 2rem;
        }

        .orderlogo {
            font-size: 1.4rem;
            color: #f1c40f;
        }

        .order-item {
            text-align: center;
            padding: 0 0.2rem;
        }

        .home-list-label .list-title {
            color: #151516;
            font-size: 0.7rem;
        }

        .home-topbar .avatar {
            width: 2rem;
            height: 2rem;
        }

        .home-topbar .ulogoinfo {
            color: #fff
        }
    </style>
</head>

<body>
    <div id="home-box">
        <header class="home-topbar aui-bar aui-bar-nav" id="header" v-cloak>
            <div class="aui-pull-left ulogoinfo" @click="gouserinfo">
                <img onload="fnLoadImage(this)" :data-url="userinfo.logo_url" class="avatar" src="../image/default_user_logo.png" /> {{usernametxt}}

            </div>
        </header>
        <div class="aui-content bg-white">
            <div class="aui-info">
                <span class="aui-info-item aui-padded-l-5 aui-font-size-16">我的订单</span>
                <div @click="go_order('all')" tapmode>查看更多<span class="aui-iconfont aui-icon-right"></span></div>
            </div>
            <div class="aui-hr"></div>
            <div class="aui-row ">
                <div class="aui-col-5 order-item" @click="go_order('wait_pay')" tapmode>
                    <i class="iconfont icon-daifukuan orderlogo"></i>
                    <p class="aui-bar-tab-label">待付款</p>
                </div>
                <div class="aui-col-5 order-item" @click="go_order('wait_pin')" tapmode>
                    <i class="iconfont icon-19 orderlogo"></i>
                    <p class="aui-bar-tab-label">待拼单</p>
                </div>
                <div class="aui-col-5 order-item" @click="go_order('wait_send')" tapmode>
                    <i class="iconfont icon-daifahuo  orderlogo"></i>
                    <p class="aui-bar-tab-label">待发货</p>
                </div>
                <div class="aui-col-5 order-item" @click="go_order('wait_recv')" tapmode>
                    <i class="iconfont icon-daishouhuo orderlogo"></i>
                    <p class="aui-bar-tab-label">待收货</p>
                </div>
                <div class="aui-col-5 order-item" @click="go_order('wait_cmt')" tapmode>
                    <i class="iconfont icon-daipingjia orderlogo"></i>
                    <p class="aui-bar-tab-label">待评价</p>
                </div>
            </div>
        </div>

        <div class="aui-content home-list-label">
            <ul class="aui-list  aui-list-in">
                <li class="aui-list-item" @click="go_coupon" tapmode>
                  <div class="aui-list-item-label-icon">
                      <i class="aui-iconfont aui-icon-cert aui-text-warning"></i>
                  </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <span class="list-title">我的优惠券</span>
                    </div>
                </li>
                <li class="aui-list-item " @click="go_fav" tapmode>
                  <div class="aui-list-item-label-icon">
                      <i class="aui-iconfont aui-icon-like aui-text-danger"></i>
                  </div>
                  <div class="aui-list-item-inner aui-list-item-arrow">
                        <span class="list-title">我的收藏</span>
                    </div>
                </li>

                <li class="aui-list-item" @click="go_address" tapmode>
                  <div class="aui-list-item-label-icon">
                      <i class="aui-iconfont aui-icon-location aui-text-info"></i>
                  </div>
                    <div class="aui-list-item-inner aui-list-item-arrow">
                        <span class="list-title">收货地址</span>
                    </div>
                </li>

                <li class="aui-list-item" @click="go_help" tapmode>
                  <div class="aui-list-item-label-icon">
                      <i class="aui-iconfont aui-icon-question"></i>
                  </div>
                  <div class="aui-list-item-inner aui-list-item-arrow">
                        <span class="list-title">帮助中心</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script language="javascript">
        var vm = new Vue({
            el: '#home-box',
            data: {
                userinfo: {},
                usernametxt: '请先登录',
                token: '',
            },
            methods: {
                gouserinfo: function() {
                  if(this.token!=''){
                    $page.openwin('home_userinfo', './home/userinfo.html');
                  }else{
                      $page.openwin('home_login','./home/login.html');
                  }

                },
                go_order: function(flag) {
                    $page.openwin('home_orderlist', './home/orderlist.html', {
                        status: flag
                    });
                },
                go_coupon: function() {
                    $page.openwin('home_coupon', './home/coupon.html');

                },
                go_fav: function() {
                    $page.openwin('home_fav', './home/fav.html');

                },
                go_contact: function() {
                    $page.openwin('home_contact', './home/contact.html');

                },
                go_help: function() {
                    $page.openwin('home_help', './home/help.html');

                },
                go_address: function() {
                    $page.openwin('home_address', './home/address.html');
                },
                load_init: function() {
                    $page.get_data('/api/member/getinfo', 'post', {
                        token: this.token
                    }, function(ret) {
                        if (ret.data.uid) {
                            vm.userinfo = ret.data;
                            vm.usernametxt = ret.data.nickname;
                        }
                    });
                }
            }
        });
        apiready = function() {
        //  checklogin();
            vm.token = $api.getStorage('token');
            console.log(vm.token);
            vm.load_init();
            //监听登录事件
            api.addEventListener({
                name: 'logined'
            }, function(ret, err) {
                vm.token = $api.getStorage('token');
                vm.load_init();
            });
            api.addEventListener({
                name: 'logout'
            }, function(ret, err) {
                vm.token = '';
                vm.load_init();
            });
        }
    </script>

</body>

</html>
